<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">航标监测与统计</div>
    </div>
    <div class="XboxTop_con" style="padding: 10px;">
      <div style="display: flex;height: 134px;">
        <div style="width: 60%">
          <div style="  color: #fff;margin-bottom: 10px;">
            当前航标总数
          </div>
          <div class="sssj_bj" style="display: flex; align-items: flex-end">
            <div style="width: calc(100% - 26px);display: flex;justify-content: space-between;">
              <div v-for="(item, i) in FlowVal" :key="i" class="numBj">
                <ScrollNumber :val="item" fontSize="50px" style="color: #fff;"></ScrollNumber>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 40%;height: 100;">
          <div style="  color: #fff;margin-bottom: 10px;">
            航标养护正常率
          </div>
          <div style="width: 100%;height: calc(100% - 31px);" ref="echbar"></div>
        </div>
      </div>
      <div style="width: 100%;height: calc(100% - 134px);">
        <el-table :data="tableData" style="width: 100%;height: 100%;" height="100%" stripe class="tabLeM">
              <el-table-column prop="date" label="管理单位">
              </el-table-column>
              <el-table-column prop="name" label="在线航标个数">
              </el-table-column>
              <el-table-column prop="address" label="离线航标个数">
              </el-table-column>
              <el-table-column prop="address" label="报警航标个数">
              </el-table-column>
            </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import ScrollNumber from "@/components/homeMode/scrollNumber.vue";
import * as echarts from "echarts";
import 'echarts-liquidfill';
export default {
  components: { ScrollNumber },
  //变量
  data() {
    return {
      FlowVal: [0, 0, 0, 0],
      zxlVal: 50,
      Echarts: null,
       tableData: [{ date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" }, { date: "123", name: "123", address: "123" },]
    };
  },
  //初始
  mounted() {
    this.$nextTick(() => {
      this.Echarts = echarts.init(this.$refs.echbar, "macarons");

      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    init(data) {
      let ml = [0, 0, 0, 0];
      let vall = data[1].sum.toString().split("").reverse();
      for (let i = 0; i < 4; i++) {
        ml[i] = vall[i] || 0;
      }
      this.FlowVal = ml.reverse().join("");
      this.zxlVal = ((data[1].sum / (data[0].sum + data[1].sum)) * 100).toFixed(0);
      console.log(this.FlowVal, 'this.FlowVal');

      this.getech();
    },
    getech() {
      var option = {
        title: [{
          text: '60%',
          x: 'center',
          y: '58%',
          textStyle: {
            fontSize: 20,
            color: '#fff',
          },
        }
        ],
        series: [{
          type: 'liquidFill',
          radius: '100%',
          center: ['50%', '50%'],
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#1EE7E7',
                },
                {
                  offset: 1,
                  color: '#1890FF',
                },
              ],
              globalCoord: false,
            },
          ],
          data: [0.6, 0.6], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'rgba(117, 205, 255, 0.25)',
          },
          label: {
            normal: {
              show: false,
              textStyle: {
                fontSize: 64,
                fontWeight: 'bold',
                color: '#000',
              },
            },
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 4,
              borderColor: 'transparent',
            },
          },
        }],
      };

      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { },
};
</script>
<style scoped>
.sssj_bj {
  /* background: url("~@/assets/hb_img/bj/bsbjw.png") no-repeat; */
  /* background-size: 100% 100%; */
  padding: 10px;
}

.sssj_zxl {
  /* height: 66px; */
  /* padding: 15px; */
  color: #66FFFF;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  font-size: 20px;
}

.numBj {
  /* width: calc(100% / 6 - 10px); */
  padding: 12px;
  background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important;
}

/* ::v-deep .down {
  background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important;
} */
::v-deep .count-flop-box {
  width: 30px !important;
  font-weight: bold;
}

::v-deep .M-Flipper {
  padding: 30px;
  background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important;
}

::v-deep .M-Flipper .digital:before {
  /* background: transparent; */
  /* background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important; */
}

::v-deep .M-Flipper .digital:after {
  /* background: transparent; */
  /* background: url("~@/assets/hb_img/bj/img_number@2x.png") no-repeat !important;
  background-size: 100% 100% !important; */
}
.tabLeM {
  background-color: transparent;
  color: #fff !important;
}

.tabLeM ::v-deep tr {
  background-color: transparent !important;
}

.tabLeM ::v-deep .el-table__header-wrapper th {
  color: #fff !important;
  background-color: rgba(32, 112, 249, 0.25) !important;
  font-size: 0.8rem !important;
}

.tabLeM ::v-deep .el-table__row--striped {
  background-color: rgba(32, 112, 249, 0.25) !important;
}

.tabLeM ::v-deep .el-table__cell {
  background-color: transparent !important;
  font-size: 0.8rem !important;
}

.tabLeM ::v-deep .cell {
  line-height: normal !important;
}
</style>
